// tank
/**
 * 坦克大战计划
 */
/**
 * @name Bomb
 */
class Bomb {
    // 炮弹
    constructor({coor,forward=0,ctx,color="red"}) {
        // x y 坐标位置
        this.x = coor[0];
        this.y = coor[1];
        // 面朝方向
        this.to = forward;
        // 画布对象
        this.ctx = ctx;
        // 颜色
        this.color = color;
        this.initTank()
        // this.boxArr.draw()
        // this.commit(1)
        // console.log(coor)
        // console.log(this.boxArr)
    }
    getPosition() {
        return [this.x,this.y]
    }
    move() {
        this.commit(this.to)
    }
    baseHei=10;
    boxArr=[];
    newRect(x,y,width,height) {
        return new RectDraw({x,y,width,height,ctx:this.ctx,color:this.color})
    }
    updateTank() {
        // 根据朝向选择需要绘制的坦克模型
        // this.boxArr = this.tankArr[forward]
    }
    initTank() {
        let base = this.baseHei;
        this.boxArr = this.newRect(0,0,base,base);
    }
    commit(forward) {
        // 更新位置
        this.update(forward);
        // 更新位置后，重新绘制新的坦克
        // this.updateTank();
        // 绘制对象
        this.draw();
    }
    update(forward) {
        this.to = forward;
        this.ctx.save()
        this.ctx.clearRect(this.x,this.y,this.baseHei,this.baseHei)
        this.ctx.restore()
        if (forward===0) this.x-=this.baseHei;
        if (forward===1) this.x+=this.baseHei;
        if (forward===2) this.y-=this.baseHei;
        if (forward===3) this.y+=this.baseHei;
    }
    draw() {
        // this.ctx.clearRect(0,0,600,300)
        this.ctx.save();
        this.ctx.fillStyle = this.color;
        this.ctx.translate(this.x, this.y)
        this.boxArr.draw();
        // this.boxArr.forEach(ele => {
        //     ele.draw();
        // })
        this.ctx.restore();
    }
}
/**
 * @name HandleBomb
 * @description 
 */
class HandleBomb {
    constructor(width,height) {
        // this.ctx=ctx;
        this.width=width;
        this.height=height;
    }
    flag=false;
    canvasArr=[];
    commit(model) {
        this.canvasArr.push(model)
        if (!this.flag) this.start();
    }
    start() {
        this.flag = true;
        this.setTime();
    }
    stop() {
        this.flag = false;
    }
    setTime() {
        this.interval = setInterval(()=> {
            if (!this.flag) return clearInterval(this.interval)
            this.handle();
        },100)
    }
    handle() {
        this.needRemove()
        this.modelMove();
        // this.draw();
    }
    modelMove() {
        this.canvasArr.forEach(ele => {

            ele.move();
        })
    }
    needRemove() {
        // 判断是否需要移除
        let arr = [];
        this.canvasArr.forEach(ele => {
            let position = ele.getPosition();
            console.log("position",position)
            if (position[0] >= 0 && position[1] >= 0 && position[0] <= this.width && position[1] <= this.height) {
                arr.push(ele)
            }
        })
        if (!arr.length) this.stop()
        this.canvasArr = arr;
    }
    draw() {
        this.canvasArr.forEach(ele => ele.draw())
    }
}
/**
 * @name RectDraw
 */
class RectDraw {
    constructor({x,y,width,height,ctx,color="red"}) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.ctx = ctx;
        this.color = color;
    }
    update(x,y) {
        this.x = x;
        this.y = y;
    }
    draw() {
        this.ctx.save();
        this.ctx.fillStyle = this.color;
        this.ctx.fillRect(
            this.x,
            this.y,
            this.width,
            this.height,
        )
        this.ctx.restore();
    }
}
/**
 * @name Tank
 */
class Tank {
    constructor({x=0,y=0,to=0,ctx,color="red",canvasInfo}) {
        // x y 坐标位置
        this.x = x;
        this.y = y;
        this.canvasInfo = canvasInfo;
        // 面朝方向
        this.to = to;
        // 画布对象
        this.ctx = ctx;
        // 颜色
        this.color = color;
        this.initTank()
        this.commit(1)
        // console.log(this.boxArr)
    }
    baseHei=10;
    boxArr=[];
    getBoomInfo() {
        // 炮弹具体位置 朝向
        let forward = this.to;
        // let addExtend = forward === 0 || forward === 2 ? 0 : 1
        let coor = [0,0];
        let base = this.baseHei;
        let {x,y,width,height} = this.boxArr[1];
        console.log("this",this)
        console.log("thisBoxArr",this.boxArr[1])
        console.log(x,y,width,height)
        if (forward === 0) coor = [x-base,y]
        if (forward === 1) coor = [x+width+base,y]
        if (forward === 2) coor = [x,y-base]
        if (forward === 3) coor = [x,y+height+base]
        // else coor = [0,0]
        // if (addExtend) coor = [mod.x+width,mod.y+height]
        // else coor = [mod.x,mod.y] 
        // let coor0 = this.boxArr[1][num0]
        // let coor1 = this.boxArr[1][num1]
        return {
            forward,
            coor:[coor[0]+this.x,coor[1]+this.y],
            color: this.color
        };
    }
    newRect(x,y,width,height) {
        return new RectDraw({x,y,width,height,ctx:this.ctx,color:this.color})
    }
    updateTank(forward) {
        // 根据朝向选择需要绘制的坦克模型
        this.boxArr = this.tankArr[forward]
    }
    initTank() {
        // 创建坦克四个方向的画面，存储起来
        let base = this.baseHei;
        let base2 = 2*base;
        this.tankArr = [
            // left
            [
                this.newRect(base,0,base2,base),
                this.newRect(0,base,base2,base),
                this.newRect(base,base2,base2,base),
            ],
            // right
            [
                this.newRect(0,0,base2,base),
                this.newRect(base,base,base2,base),
                this.newRect(0,base2,base2,base),
            ],
            // up
            [
                this.newRect(0,base,base,base2),
                this.newRect(base,0,base,base2),
                this.newRect(base2,base,base,base2),
            ],
            // down
            [
                this.newRect(0,0,base,base2),
                this.newRect(base,base,base,base2),
                this.newRect(base2,0,base,base2),
            ],
        ]
    }
    commit(forward) {
        // 更新位置
        this.update(forward);
        // 更新位置后，重新绘制新的坦克
        this.updateTank(forward);
        // 绘制对象
        this.draw();
    }
    update(forward) {
        this.to = forward;
        // let width = 0;
        // let height = 0;
        let BH3 = 3*this.baseHei;
        // this.ctx.save();
        // let scrollX = this.to === 0 || this.to === 1;
        // if (scrollX) width = 3*this.baseHei
        this.ctx.clearRect(this.x,this.y,BH3,BH3)
        // this.ctx.restore();
        if (forward===0) this.x-=this.baseHei;
        if (forward===1) this.x+=this.baseHei;
        if (forward===2) this.y-=this.baseHei;
        if (forward===3) this.y+=this.baseHei;
    }
    draw() {
        this.ctx.save();
        this.ctx.fillStyle = this.color;
        this.ctx.translate(this.x, this.y)
        this.boxArr.forEach(ele => {
            ele.draw();
        })
        this.ctx.restore();
    }
}
class Draw {
    constructor(ele) {
        this.element = ele;
        let dom = document.getElementById(ele)
        let ctx = dom.getContext('2d')
        let width = dom.width;
        let height = dom.height
        this.width = width;
        this.height = height;
        this.handleBome = new HandleBomb(width,height)
        this.tank = new Tank({ctx,canvasInfo: {width,height}});
        this.ctx = ctx
    }
    clear() {
        this.ctx.clearRect(0,0,600,300)
    }
    shoot() {
        let forward = this.tank.getBoomInfo();
        console.log(forward)
        this.handleBome.commit(new Bomb({...forward,ctx:this.ctx}))
    }
    commit(forward) {
        // console.log(1)
        this.tank.commit(forward)
    }
}
export default Draw